"use client"

import BgImgUrl from './assets/bg.webp'
import BgMobileImgUrl from './assets/bg-mobile.webp'
import LogoSvgUrl from './assets/logo.svg'
import { getProductList, getAddresInfoList, getPartnerList } from '../config'
import { getTranslation } from "../../../locales/translations";

function ProductCard({ title, list = [], lang }) {
    return (
        <div className={`bg-[#f9f9f9] whitespace-nowrap h-full rounded-xl p-4 space-y-4 ${lang === "ar" ? "md:pl-6 md:ml-6 pl-1 ml-1" : 'md:pr-12 md:mr-6 pr-1 mr-1'}`}>
            <p className='font-bold'>{title}</p>
            {list.map((item, index) => <div key={index}>{item}</div>)}
        </div>
    )
}

function AddressCard({ name, details = [] }) {
    return (
        <div className='space-y-4'>
            <p className='font-bold'>{name}</p>
            {details.map((item, index) =>
                <div key={index} className='flex flex-col space-y-1'>
                    <p className='text-[#606472]'>{item.title}</p>
                    <p>{item.desc}</p>
                </div>)}
        </div>
    )
}

export default function Page({ lang }) {
    const t = (key) => getTranslation(key, lang);
    const productList = getProductList({ t })
    const addresInfoList = getAddresInfoList({ t })
    const partnerList = getPartnerList({ t })

    const astyle = {
        backgroundImage: `url(${BgImgUrl})`,
    }

    const aMobilestyle = {
        backgroundImage: `url(${BgMobileImgUrl})`,
    }
    return (
        <div className="h-full bg-white overflow-x-auto">
            <div className="mx-auto w-full hidden md:block">
                <div style={astyle} className="bg-cover bg-no-repeat md:pb-16 min-h-[18rem]">
                    <div className="max-w-5xl mx-auto space-y-6 p-6 pt-10">
                        <p className="text-3xl font-bold">{t('aboutLinks.aboutUs')}</p>
                        <p className="whitespace-pre-line leading-loose text-[#606472]">{t('aboutLinks.introduce')}</p>
                        <div className='flex space-x-4'>
                            <img src={LogoSvgUrl} className='w-32' />
                            <span className='text-xl font-bold'>{t('aboutLinks.productMatrix')}</span>
                        </div>
                        <div className='flex flex-col md:flex-row'>
                            {productList.map(({ title, list }) => <ProductCard lang={lang} title={title} list={list} key={title} />)}
                        </div>
                    </div>
                </div>
            </div>
            <div className="mx-auto w-full block md:hidden">
                <div style={aMobilestyle} className="bg-cover bg-no-repeat md:pb-16 min-h-[18rem]">
                    <div className="mx-auto space-y-4 p-6 pb-8 px-4">
                        <p className="text-xl font-bold">{t('aboutLinks.aboutUs')}</p>
                        <p className="text-sm whitespace-pre-line leading-relaxed text-[#606472]">{t('aboutLinks.introduce')}</p>
                    </div>
                </div>
                <div className='p-4 py-6'>
                    <div className='flex space-x-2'>
                        <img src={LogoSvgUrl} className='w-20' />
                        <span className='font-[600]'>{t('aboutLinks.productMatrix')}</span>
                    </div>
                    <div className='flex flex-row flex-wrap md:flex-auto'>
                        {productList.map(({ title, list }) => <div className='w-1/2 mt-2 pr-2' key={title}><ProductCard lang={lang} title={title} list={list} /></div>)}
                    </div>
                    <div className='border-b pt-6'>
                    </div>
                </div>
            </div>
            <div className="max-w-5xl mx-auto py-4 md:py-12 px-6">
                <div className='space-y-6 md:space-y-12'>
                    <div className='flex flex-col space-y-1'>
                        <p className='md:text-2xl font-bold'>{t("aboutLinks.contactInformation")}:</p>
                        <span>{t("aboutLinks.contactInformationDesc")}:</span>
                    </div>
                    <div className='space-y-8'>
                        {addresInfoList.map(({ name, details }) => <AddressCard name={name} details={details} key={name} />)}
                    </div>
                </div>
            </div>
            <footer className='py-6 bg-[#F5F5F5] px-6'>
                <div className='max-w-5xl mx-auto flex flex-col space-y-12 justify-center items-center text-center'>
                    <div className='space-y-6'>
                        <p className='text-2xl font-bold'>{t("aboutLinks.partners")}</p>
                        <p>{t("aboutLinks.partnersDesc")}</p>
                    </div>
                    <div className='flex'>
                        {partnerList.map(({ title, imgUrl }) =>
                            <div key={title} className="space-y-4 flex justify-center items-center flex-col ml-2 md:ml-24" >
                                <img src={imgUrl} alt={title} className='w-24 md:w-36 p-4 bg-white rounded-xl' />
                                <p>{title}</p>
                            </div>)}
                    </div>
                </div>
            </footer>
        </div>
    )
}
